<template>
  <div class="container">
    <div class="app-container">
      <div class="left">
        <el-table
          ref="selResTable"
          :data="selectionList"
          highlight-current-row
          @current-change="selectNode"
          :cell-style="cellStyle"
          height="500px"
          >
          <el-table-column
            property="selectionName"
            label="事项名称"
            width="150px">
          </el-table-column>
          <el-table-column
            property="departmentName"
            label="创建部门"
            width="150px">
          </el-table-column>
          <el-table-column
            property="createTime"
            label="创建时间"
            width="160px">
          </el-table-column>
        </el-table>
      </div>
      <div class="right">
        <el-row class="opeate-tools" type="flex" justify="start">
          <!-- <el-button size="mini" @click="exportFile">导出全部文件</el-button> -->
        </el-row>
        <!-- 表格组件 -->
          <el-table :data="responseMap" height="600px">
          <!-- header -->
          <el-table-column
            property="departmentName"
            label="部门名称"
            width="350px">
          </el-table-column>
          <el-table-column
            property="responseTime"
            label="回复时间"
            width="350px">
          </el-table-column>
          <!-- body部分 -->
          <el-table-column label="操作" width="280px" fixed="right">
            <template v-slot="{ row }">
              <el-button slot="reference" style="margin-left:10px" type="text" @click="downL(row.id)">下载</el-button>
            </template>
          </el-table-column>
          <!-- body部分 -->
          </el-table>
      </div>
    </div>
  </div>
</template>
<script>
import { getSelection, getSelectionResponse, getSelectionResponseFileName, getSelectionResponseFile } from '@/api/employee'
import store from '@/store'
import FileSaver from 'file-saver'
export default {
  name: 'Approvals',
  data() {
    return {
      selectionId: '',
      selectionList: [],
      selectionInputContent: '', // 选调事项名称
      responseMap: [],
    }
  },
  created() {
    this.getSelection()
  },
  methods: {
    async getSelection() {
      const param = {
        levelId: store.getters.levelId,
        departmentId: store.getters.departmentId
      }
      const data = await getSelection(param)
      this.selectionList = data
      this.selectionId = this.selectionList[0].id
      //this.getSelectionResponse()
      this.$nextTick(() => {
        const firstRowOfFirstTable = this.$refs.selResTable.$el.querySelector('.el-table__body tbody tr');
        if (firstRowOfFirstTable) {
          firstRowOfFirstTable.click(); // 模拟点击第一行
        }
      });
    },
    async getSelectionResponse() {
      this.responseMap = await getSelectionResponse(this.selectionId)
    },
    selectNode(node) {
      this.selectionId = node.id
      this.getSelectionResponse()
    },
    cellStyle() {
      return "cursor:pointer;"
    },
    async downL(id) {
      const fileName = await getSelectionResponseFileName(id)
      const data = await getSelectionResponseFile(id)
      FileSaver.saveAs(data,fileName)
    }
  }
}
</script>
<style lang="scss" scoped>
.app-container {
  background: #fff;
  display: flex;
  // height: 800px;
  // overflow: auto;
  .left {
    width: 320px;
    padding: 20px;
    border-right: 1px solid #eaeef4;
  }
  .right {
    flex: 1;
    padding: 20px;
    .opeate-tools {
      margin:10px ;
    }
    .opeate-tools > .el-button {
      border-radius: 5px;
      border-color: rgb(55, 55, 55);
      color: rgb(35, 35, 35);
    }
  }
}
</style>
